<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四期培训作业</title>
    <style type="text/css">
        .box{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background: #f5f5f5;
        }
        .box .child-1{
            float: left;
            width: 480px;
            height: 140px;
            margin: 10px;
            box-sizing: border-box;
            border: 1px #000000 solid;
            background: white;
        }
        .box .child-1-1{
            float: left;
            width: 140px;
            height: 120px;
            margin: 10px 9px;
            background: #62a9fb;
        }
        .box .child-1-2{
            float: left;
            width: 140px;
            height: 120px;
            margin: 10px 9px;
            background: #ffb266;
        }
        .box .child-1-3{
            float: left;
            width: 140px;
            height: 120px;
            margin: 10px 9px;
            background: #68eae6;
        }
        .box .child-2{
            float: left;
            width: 480px;
            height: 140px;
            margin: 10px;
            box-sizing: border-box;
            border: 1px #000000 solid;
            background: white;
        }
        .box .child-3{
            float: left;
            width: 480px;
            height: 140px;
            margin: 10px;
            box-sizing: border-box;
            border: 1px #000000 solid;
            background: white;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child-1">
        <div class="child-1-1"></div>
        <div class="child-1-2"></div>
        <div class="child-1-3"></div>
    </div>
    <div class="child-2">
        <div class="child-1-1"></div>
        <div class="child-1-2"></div>
        <div class="child-1-3"></div>
    </div>
    <div class="child-3">
        <div class="child-1-1"></div>
        <div class="child-1-2"></div>
        <div class="child-1-3"></div>
    </div>
</div>
</body>
</html>